import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

@RoutePage()
class ScoreScreen extends StatelessWidget {
  const ScoreScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverPadding(
          padding: EdgeInsets.only(left: 49.r, right: 37.r, top: 18.r),
          sliver: SliverFixedExtentList.builder(
            itemCount: 30,
            itemExtent: 53.r,
            itemBuilder: (context, index) {
              return const _ScoreItem();
            },
          ),
        ),
        const _ScoreAcquisition(),
      ],
    );
  }
}

class _ScoreItem extends StatelessWidget {
  const _ScoreItem();

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 325.r,
      height: 39.r,
      child: Row(
        children: [
          const Expanded(
            child: _NotificationTitle(),
          ),
          SizedBox(
            width: 15.r,
          ),
          SizedBox(
            width: 94.r,
            height: 38.r,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Expanded(
                  child: Row(
                    children: [
                      Text(
                        '获得积分',
                        style: TextStyle(
                          fontSize: 14.sp,
                          fontWeight: FontWeight.w500,
                          color: const Color(0xFF383838),
                        ),
                      ),
                      SizedBox(width: 3.r),
                      Container(
                        width: 29.r,
                        height: 15.r,
                        decoration: BoxDecoration(
                          gradient: const LinearGradient(
                            colors: [
                              Color(0xFFFFC300),
                              Color(0xFFFF8D1A),
                            ],
                          ),
                          borderRadius: BorderRadius.all(
                            Radius.circular(90.r),
                          ),
                        ),
                        alignment: Alignment.center,
                        child: Text(
                          '+30',
                          style: TextStyle(
                            fontSize: 12.sp,
                            fontWeight: FontWeight.w500,
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(height: 4.r),
                Expanded(
                  child: Text(
                    '2023-06-19    09:11',
                    style: TextStyle(
                      fontSize: 10.sp,
                      fontWeight: FontWeight.w400,
                      color: const Color(0xFFA6A6A6),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class _NotificationTitle extends StatelessWidget {
  const _NotificationTitle();

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 216.r,
      height: 38.r,
      child: Text(
        '参加“话题丨高考季的感动瞬间”活动获得最多点赞数',
        style: TextStyle(
          fontSize: 13.sp,
          fontWeight: FontWeight.w400,
          color: const Color(0xFFA6A6A6),
        ),
      ),
    );
  }
}

class _ScoreAcquisition extends StatelessWidget {
  const _ScoreAcquisition();

  @override
  Widget build(BuildContext context) {
    return SliverToBoxAdapter(
      child: SizedBox(
        height: 164.r,
        width: 1.w,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Row(
              children: [
                const Expanded(child: Divider()),
                Text(
                  '积分累计: 258360',
                  style: TextStyle(
                    fontSize: 13.sp,
                    fontWeight: FontWeight.w400,
                  ),
                ),
                const Expanded(child: Divider()),
              ],
            ),
            SizedBox(height: 9.r),
            Container(
              width: 110.r,
              height: 34.r,
              decoration: BoxDecoration(
                gradient: const LinearGradient(
                  colors: [
                    Color(0xFFFFC300),
                    Color(0xFFFF8D1A),
                  ],
                ),
                borderRadius: BorderRadius.all(
                  Radius.circular(90.r),
                ),
              ),
              alignment: Alignment.center,
              child: Text(
                '积分兑换',
                style: TextStyle(
                  fontSize: 18.sp,
                  fontWeight: FontWeight.w500,
                  color: Colors.white,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
